<template>
  <div id="admin-manage" class="page-wrapper">
    <div class="selector-wrapper main-card wrapper">
      <div class="main-card">
        <GroupSelector :selectorData="selectorData" />
      </div>
      <el-button type="primary" @click="handleSubmitClick">获取数据</el-button>
    </div>

    <div class="wrapper main-card">
      <el-table
        ref="singleTable"
        :data="pageData"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ 'text-align': 'center' }"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column property="SS_MC" label="房间号"></el-table-column>
        <el-table-column label="房间类型">
          <template slot-scope="scope">
            {{ scope.row.peopleNum }}人间
          </template>
        </el-table-column>
        <el-table-column property="roomNum" label="入住人数"></el-table-column>
        <el-table-column
          property="meterbasesName"
          label="电表收费模板"
        ></el-table-column>
        <el-table-column
          property="coldbasesName"
          label="冷水收费模板"
        ></el-table-column>
        <el-table-column
          property="hotbasesName"
          label="热水收费模板"
        ></el-table-column>
        <el-table-column
          property="metersubsidiesName"
          label="电表补助模板"
        ></el-table-column>
        <el-table-column
          property="coldsubsidiesName"
          label="冷水补助模板"
        ></el-table-column>
        <el-table-column property="button" label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button @click="modify(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="参数详情"
      :visible.sync="dialogVisible"
      width="800px"
      height="800px"
    >
      <el-tabs type="border-card">
        <el-form class="form" ref="form" :model="modifydata">
          <div class="form-item-wrapper">
            <el-form-item label="房间号" required prop="SS_MC">
              <el-input v-model.trim="modifydata.SS_MC" disabled></el-input>
            </el-form-item>
            <el-form-item label="房间类型" required prop="peopleNum">
              <el-input v-model.trim="modifydata.peopleNum"></el-input>
            </el-form-item>
            <el-form-item label="入住人数" required prop="roomNum">
              <el-input
                v-model.trim="modifydata.roomNum"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </div>
          <div class="form-item-wrapper">
            <el-form-item label="电表收费模板" required prop="meterbasesId">
              <!-- <el-input
                v-model.trim="modifydata.limitPower"
                placeholder="请输入"
              ></el-input> -->
              <getmeterbases
                v-model="modifydata.meterbasesId"
                @change="getmeterbasesChange"
              ></getmeterbases>
            </el-form-item>
            <el-form-item label="冷水收费模板" required prop="coldbasesId">
              <!-- <el-input
                v-model.trim="modifydata.depositMoney"
                placeholder="请输入"
              ></el-input> -->
              <getclodwatermeterbases
                v-model="modifydata.coldbasesId"
                @change="getclodwatermeterbasesChange"
              ></getclodwatermeterbases>
            </el-form-item>
            <el-form-item label="热水收费模板" required prop="hotbasesId">
              <!-- <el-input
                v-model.trim="modifydata.subsidyMoney"
                placeholder="请输入"
              ></el-input> -->
              <getwatermeterbases
                v-model="modifydata.hotbasesId"
                @change="getwatermeterbasesChange"
              ></getwatermeterbases>
            </el-form-item>
          </div>
          <div class="form-item-wrapper">
            <el-form-item label="电费补助模板" required prop="metersubsidiesId">
              <meter-subsidy
                v-model="modifydata.metersubsidiesId"
                @change="meterSubsidyChange"
              ></meter-subsidy>
            </el-form-item>

            <el-form-item label="冷水补助模板" required prop="coldsubsidiesId">
              <getcoldwatersubsidys
                v-model="modifydata.coldsubsidiesId"
                @change="getcoldwatersubsidysChange"
              ></getcoldwatersubsidys>
            </el-form-item>
          </div>
        </el-form>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import meterSubsidy from '@/components/selector/meterSubsidy/index.vue'
import getcoldwatersubsidys from '@/components/selector/getcoldwatersubsidys/index.vue'
import getmeterbases from '@/components/selector/getmeterbases/index.vue'
import getwatermeterbases from '@/components/selector/getwatermeterbases/index.vue'
import getclodwatermeterbases from '@/components/selector/getclodwatermeterbases/index.vue'

import GroupSelector from './components/GroupSelector'
import { getmeter, upmeter } from '@/api/meter'
import { dormitorymanage, changedormitorymanage } from '@/api/dormitorymanage'
export default {
  name: 'RoomInfo',
  components: {
    GroupSelector,
    meterSubsidy,
    getcoldwatersubsidys,
    getmeterbases,
    getwatermeterbases,
    getclodwatermeterbases
  },
  data() {
    return {
      currentPage: 1,
      pageData: [],
      total: '',
      pageSize: 10,
      dialogVisible: false,
      selectorData: {
        buildingId: null,
        floorId: null,
        roomId: null
      },
      formData: {},
      modifydata: {},
      tableData: [],
      currentRow: null
    }
  },

  methods: {
    meterSubsidyChange(val) {
      console.log('Selected Subsidy ID from another page:', val)
      this.modifydata.metersubsidiesId = val
    },
    getcoldwatersubsidysChange(val) {
      console.log('Selected Subsidy ID from another page:', val)
      this.modifydata.coldsubsidiesId = val
    },
    getmeterbasesChange(val) {
      console.log('Selected Subsidy ID from another page:', val)
      this.modifydata.meterbasesId = val
    },
    getwatermeterbasesChange(val) {
      console.log('Selected Subsidy ID from another page:', val)
      this.modifydata.hotbasesId = val
    },
    getclodwatermeterbasesChange(val) {
      console.log('Selected Subsidy ID from another page:', val)
      this.modifydata.coldbasesId = val
    },

    // 实现分页的方法
    queryByPage() {
      // 起始位置 = (当前页 - 1) x 每页的大小
      const start = (this.currentPage - 1) * this.pageSize
      // 结束位置 = 当前页 x 每页的大小
      const end = this.currentPage * this.pageSize

      return this.tableData.slice(start, end)
    },
    handleSizeChange(val) {
      this.pageSize = val

      this.pageData = this.queryByPage()
    },
    handleCurrentChange(val) {
      this.currentPage = val

      this.pageData = this.queryByPage()
    },

    handleSwitchChange(row) {
      console.log(row)
      upmeter(row).then(res => {
        console.log(res.data.result.state)
        if (res.data.result.state === '1') {
          this.$message.success('开关已打开')
        } else {
          this.$message.warning('开关已关闭')
        }
      })
    },
    //搜索按钮
    handleSubmitClick() {
      console.log(this.selectorData)

      dormitorymanage(this.selectorData).then(res => {
        console.log('获取数据', res)
        if (res.success == true) {
          // this.tableData = res.data
          // this.pageData = res.data
          this.total = res.data.rooms.length

          this.tableData = res.data.rooms
          this.pageData = this.queryByPage()
          console.log(this.tableData)
        }
      })
    },
    modify(row) {
      console.log(row)
      this.modifydata = row
      this.dialogVisible = true
    },
    handleSubmit() {
      console.log(this.modifydata)
      changedormitorymanage({
        roomId: this.modifydata.id,
        data: this.modifydata
      }).then(res => {
        console.log(res)
        if (res.success == true) {
          this.$message.success('修改成功')
          this.dialogVisible = false
        }
      })
    }
  },

  mounted() {
    // dormitorymanage().then(res => {
    //   this.total = res.data.rooms.length
    //   console.log(res);
    //
    //   if (res.success == true) {
    //     this.tableData = res.data.rooms
    //     this.pageData = this.queryByPage()
    //   }
    // })
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  margin: 40px 0;
}

.selector-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 垂直居中 */
}

.list-wrapper {
  margin-top: 40px;
}
.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}
.form-item-wrapper {
  display: flex;
  justify-content: space-between;
}
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* Adjust margin as needed */
}
</style>
